<template>
  <!-- word,excel查看 -->
  <div class="box">
    <vue-office-docx
      v-if="!excels"
      :src="docx"
      style="height: 95vh; width: 100%"
      @rendered="rendered"
    />
    <vue-office-excel
      v-if="excels"
      :src="excel"
      style="height: 95vh; width: 100%"
    />
    <button
      @click="$emit('click')"
      style="margin: 0 auto; width: 80px; margin-top: 10px"
    >
      取消
    </button>
  </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
  },
  data() {
    return {
      excels: false,
      docx: "http://static.shanhuxueyuan.com/test6.docx", //设置文档网络地址，可以是相对地址
      excel: "http://static.shanhuxueyuan.com/demo/excel.xlsx",
    };
  },
  methods: {
    rendered() {
      console.log("渲染完成");
    },
  },
};
</script>
<style  scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: gray;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>